<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 排卵预测</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: #ffffff;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 12px 16px 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f0f0f0;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 56px);
                overflow-y: auto;
                padding-bottom: 16px;
            }
            .status-card {
                background-color: #ffffff;
                padding: 20px 16px;
                position: relative;
                margin-bottom: 12px;
            }
            .status-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 16px;
            }
            .status-title {
                font-size: 18px;
                font-weight: 600;
                color: #333;
            }
            .status-share {
                display: flex;
                align-items: center;
                gap: 8px;
                color: #999;
                font-size: 14px;
            }
            .status-date {
                color: #999;
                font-size: 14px;
                margin-top: 4px;
            }
            .ovulation-status {
                display: flex;
                align-items: center;
                margin-top: 12px;
            }
            .ovulation-icon {
                width: 50px;
                height: 50px;
                border-radius: 25px;
                background-color: #fff8e1;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 16px;
            }
            .ovulation-icon i {
                font-size: 24px;
                color: #ffb74d;
            }
            .ovulation-info {
                flex: 1;
            }
            .ovulation-day {
                font-size: 16px;
                font-weight: 600;
                color: #333;
                margin-bottom: 4px;
            }
            .ovulation-desc {
                font-size: 14px;
                color: #666;
            }
            .cycle-progress-bar {
                height: 8px;
                background-color: #f0f0f0;
                border-radius: 4px;
                margin-top: 20px;
                position: relative;
                overflow: hidden;
            }
            .progress-fill {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                background-color: #ffb74d;
                border-radius: 4px;
            }
            .progress-marker {
                position: absolute;
                top: -2px;
                width: 12px;
                height: 12px;
                border-radius: 6px;
                background-color: #ffb74d;
                transform: translateX(-50%);
            }
            .progress-marker.current {
                background-color: #ff9fb5;
            }
            .progress-labels {
                display: flex;
                justify-content: space-between;
                margin-top: 8px;
                font-size: 12px;
                color: #999;
            }
            .progress-label.highlight {
                color: #ff9fb5;
                font-weight: 500;
            }
            .chart-card {
                background-color: #ffffff;
                padding: 16px;
                margin-bottom: 12px;
            }
            .chart-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
            }
            .chart-title {
                font-size: 16px;
                font-weight: 600;
                color: #333;
            }
            .chart-period {
                display: flex;
                gap: 12px;
            }
            .chart-period-btn {
                font-size: 13px;
                color: #666;
                padding: 4px 8px;
                border-radius: 12px;
                background-color: #f0f0f0;
            }
            .chart-period-btn.active {
                background-color: #fff0f3;
                color: #ff9fb5;
            }
            .chart-container {
                height: 200px;
                position: relative;
                margin-top: 12px;
            }
            .chart {
                width: 100%;
                height: 100%;
                background-color: #f9f9f9;
                border-radius: 8px;
                position: relative;
                overflow: hidden;
            }
            .chart-y-axis {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 40px;
                padding: 10px 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                font-size: 11px;
                color: #999;
            }
            .chart-y-label {
                padding-left: 4px;
            }
            .chart-grid {
                position: absolute;
                top: 0;
                left: 40px;
                right: 0;
                bottom: 20px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .chart-grid-line {
                width: 100%;
                height: 1px;
                background-color: #f0f0f0;
            }
            .chart-x-axis {
                position: absolute;
                bottom: 0;
                left: 40px;
                right: 0;
                height: 20px;
                display: flex;
                justify-content: space-between;
                font-size: 11px;
                color: #999;
            }
            .chart-line {
                position: absolute;
                top: 10px;
                left: 40px;
                right: 0;
                bottom: 20px;
                z-index: 2;
            }
            .chart-line-path {
                stroke: #ff9fb5;
                stroke-width: 2;
                fill: none;
            }
            .chart-line-dot {
                fill: #ff9fb5;
                stroke: white;
                stroke-width: 1;
            }
            .chart-legend {
                display: flex;
                gap: 16px;
                margin-top: 12px;
                justify-content: center;
            }
            .chart-legend-item {
                display: flex;
                align-items: center;
                font-size: 12px;
                color: #666;
            }
            .chart-legend-color {
                width: 12px;
                height: 12px;
                border-radius: 2px;
                margin-right: 4px;
            }
            .prediction-card {
                background-color: #ffffff;
                border-radius: 12px;
                margin: 0 16px 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .prediction-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 16px;
            }
            .prediction-title {
                font-size: 16px;
                font-weight: 600;
                color: #333;
            }
            .prediction-toggle {
                display: flex;
                align-items: center;
                font-size: 13px;
                color: #666;
            }
            .prediction-toggle-switch {
                position: relative;
                display: inline-block;
                width: 40px;
                height: 20px;
                margin-left: 8px;
            }
            .prediction-toggle-switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }
            .prediction-toggle-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                border-radius: 10px;
                transition: 0.4s;
            }
            .prediction-toggle-slider:before {
                position: absolute;
                content: '';
                height: 16px;
                width: 16px;
                left: 2px;
                bottom: 2px;
                background-color: white;
                border-radius: 50%;
                transition: 0.4s;
            }
            input:checked + .prediction-toggle-slider {
                background-color: #ff9fb5;
            }
            input:checked + .prediction-toggle-slider:before {
                transform: translateX(20px);
            }
            .prediction-dates {
                display: flex;
                gap: 10px;
                margin-top: 12px;
            }
            .prediction-date-item {
                flex: 1;
                background-color: #f9f9f9;
                border-radius: 8px;
                padding: 12px;
                text-align: center;
            }
            .prediction-date-label {
                font-size: 13px;
                color: #666;
                margin-bottom: 6px;
            }
            .prediction-date-value {
                font-size: 15px;
                font-weight: 600;
                color: #333;
            }
            .prediction-date-item.highlight {
                background-color: #fff8e1;
            }
            .prediction-date-item.highlight .prediction-date-label {
                color: #ffb74d;
            }
            .prediction-date-item.highlight .prediction-date-value {
                color: #f57c00;
            }
            .fertile-period {
                display: flex;
                margin-top: 16px;
                padding: 12px;
                background-color: #f0f8ff;
                border-radius: 8px;
            }
            .fertile-icon {
                width: 40px;
                height: 40px;
                border-radius: 20px;
                background-color: #e3f2fd;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 12px;
                color: #2196f3;
                font-size: 20px;
            }
            .fertile-info {
                flex: 1;
            }
            .fertile-title {
                font-size: 14px;
                font-weight: 500;
                color: #2196f3;
                margin-bottom: 4px;
            }
            .fertile-desc {
                font-size: 13px;
                color: #666;
            }
            .tips-card {
                background-color: #ffffff;
                border-radius: 12px;
                margin: 0 16px 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .tips-header {
                font-size: 16px;
                font-weight: 600;
                color: #333;
                margin-bottom: 12px;
            }
            .tips-item {
                display: flex;
                margin-bottom: 12px;
                padding-bottom: 12px;
                border-bottom: 1px solid #f0f0f0;
            }
            .tips-item:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: none;
            }
            .tips-icon {
                width: 32px;
                height: 32px;
                border-radius: 16px;
                background-color: #f9f9f9;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 12px;
                color: #ff9fb5;
            }
            .tips-content {
                flex: 1;
            }
            .tips-title {
                font-size: 14px;
                font-weight: 500;
                color: #333;
                margin-bottom: 4px;
            }
            .tips-desc {
                font-size: 13px;
                color: #666;
            }
            /* 排卵检测记录样式 */
            .record-card {
                background-color: #ffffff;
                border-radius: 12px;
                margin: 0 16px 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .record-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 16px;
            }
            .record-title {
                font-size: 16px;
                font-weight: 600;
                color: #333;
            }
            .record-add-btn {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 6px 12px;
                background-color: #ff9fb5;
                color: white;
                border-radius: 16px;
                font-size: 13px;
            }
            .record-tabs {
                display: flex;
                background-color: #f5f5f5;
                border-radius: 8px;
                padding: 3px;
                margin-bottom: 16px;
            }
            .record-tab {
                flex: 1;
                text-align: center;
                padding: 8px 0;
                font-size: 13px;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .record-tab.active {
                background-color: #fff;
                color: #ff9fb5;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .record-content {
                position: relative;
            }
            .record-panel {
                display: none;
            }
            .record-panel.active {
                display: block;
            }
            .record-form-group {
                margin-bottom: 16px;
            }
            .record-form-label {
                font-size: 14px;
                font-weight: 500;
                color: #333;
                margin-bottom: 8px;
            }
            .record-option-group {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
            }
            .record-option {
                flex: 1;
                min-width: 80px;
                padding: 10px;
                background-color: #f9f9f9;
                border-radius: 8px;
                text-align: center;
                font-size: 13px;
                color: #666;
                cursor: pointer;
            }
            .record-option.selected {
                background-color: #fff0f3;
                color: #ff6d8f;
                border: 1px solid #ff9fb5;
            }
            .record-option i {
                font-size: 18px;
                margin-bottom: 6px;
            }
            .record-input {
                width: 100%;
                padding: 10px 12px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                font-size: 14px;
                color: #333;
            }
            .record-textarea {
                width: 100%;
                padding: 10px 12px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                font-size: 14px;
                color: #333;
                resize: none;
                min-height: 80px;
            }
            .record-btn {
                display: block;
                width: 100%;
                padding: 12px;
                background-color: #ff9fb5;
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 15px;
                font-weight: 500;
                text-align: center;
                margin-top: 20px;
                cursor: pointer;
            }
            .history-title {
                font-size: 15px;
                font-weight: 500;
                color: #333;
                margin: 16px 0 12px;
            }
            .history-list {
                border-radius: 8px;
                overflow: hidden;
                border: 1px solid #f0f0f0;
            }
            .history-item {
                display: flex;
                padding: 12px;
                background-color: #f9f9f9;
                border-bottom: 1px solid #f0f0f0;
            }
            .history-item:last-child {
                border-bottom: none;
            }
            .history-date {
                width: 60px;
                text-align: center;
                font-size: 13px;
                font-weight: 500;
            }
            .history-date-day {
                font-size: 16px;
                font-weight: 600;
                color: #333;
            }
            .history-date-month {
                color: #666;
            }
            .history-content {
                flex: 1;
                padding-left: 12px;
                border-left: 1px solid #f0f0f0;
            }
            .history-item-row {
                display: flex;
                align-items: center;
                margin-bottom: 6px;
            }
            .history-item-label {
                font-size: 13px;
                color: #666;
                width: 70px;
            }
            .history-item-value {
                font-size: 13px;
                color: #333;
                flex: 1;
            }
            .history-item-tag {
                display: inline-block;
                padding: 2px 8px;
                background-color: #fff0f3;
                color: #ff6d8f;
                border-radius: 4px;
                font-size: 12px;
                margin-right: 4px;
            }
            .record-chart-container {
                height: 120px;
                background-color: #f9f9f9;
                border-radius: 8px;
                margin-bottom: 16px;
                padding: 8px;
                position: relative;
            }
            .record-chart-legend {
                display: flex;
                gap: 12px;
                margin-bottom: 12px;
                font-size: 12px;
                color: #666;
            }
            .record-chart-legend-item {
                display: flex;
                align-items: center;
            }
            .record-chart-legend-color {
                width: 10px;
                height: 10px;
                border-radius: 2px;
                margin-right: 4px;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-arrow-left mr-4"></i>
                    <h1 class="text-lg font-medium">排卵预测</h1>
                </div>
                <div class="flex gap-3">
                    <i class="fas fa-sliders-h"></i>
                    <i class="fas fa-share-alt"></i>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 排卵状态卡片 -->
                <div class="status-card">
                    <div class="status-header">
                        <div>
                            <div class="status-title">排卵日预测</div>
                            <div class="status-date">基于您最近6个月的月经周期</div>
                        </div>
                        <div class="status-share">
                            <i class="fas fa-share-alt"></i>
                            <span>分享</span>
                        </div>
                    </div>

                    <div class="ovulation-status">
                        <div class="ovulation-icon">
                            <i class="fas fa-venus"></i>
                        </div>
                        <div class="ovulation-info">
                            <div class="ovulation-day">下次排卵日: 2023-07-15</div>
                            <div class="ovulation-desc">距今还有9天</div>
                        </div>
                    </div>

                    <div class="cycle-progress-bar">
                        <div class="progress-fill" style="width: 45%"></div>
                        <div class="progress-marker" style="left: 20%"></div>
                        <div class="progress-marker current" style="left: 45%"></div>
                        <div class="progress-marker" style="left: 65%"></div>
                    </div>
                    <div class="progress-labels">
                        <div class="progress-label">月经期</div>
                        <div class="progress-label highlight">当前</div>
                        <div class="progress-label">排卵期</div>
                        <div class="progress-label">下次月经</div>
                    </div>
                </div>

                <!-- 基础体温图表 -->
                <div class="chart-card">
                    <div class="chart-header">
                        <div class="chart-title">基础体温图表</div>
                        <div class="chart-period">
                            <div class="chart-period-btn">30天</div>
                            <div class="chart-period-btn active">90天</div>
                            <div class="chart-period-btn">180天</div>
                        </div>
                    </div>

                    <div class="chart-container">
                        <div class="chart">
                            <div class="chart-y-axis">
                                <div class="chart-y-label">37.0°</div>
                                <div class="chart-y-label">36.8°</div>
                                <div class="chart-y-label">36.6°</div>
                                <div class="chart-y-label">36.4°</div>
                                <div class="chart-y-label">36.2°</div>
                            </div>
                            <div class="chart-grid">
                                <div class="chart-grid-line"></div>
                                <div class="chart-grid-line"></div>
                                <div class="chart-grid-line"></div>
                                <div class="chart-grid-line"></div>
                                <div class="chart-grid-line"></div>
                            </div>
                            <div class="chart-x-axis">
                                <div>6/1</div>
                                <div>6/8</div>
                                <div>6/15</div>
                                <div>6/22</div>
                                <div>6/29</div>
                                <div>7/6</div>
                            </div>
                            <svg class="chart-line" viewBox="0 0 300 160" preserveAspectRatio="none">
                                <path
                                    class="chart-line-path"
                                    d="M 0,80 L 30,85 L 60,90 L 90,60 L 120,40 L 150,30 L 180,60 L 210,70 L 240,85 L 270,80 L 300,75"
                                ></path>
                                <circle class="chart-line-dot" cx="0" cy="80" r="4"></circle>
                                <circle class="chart-line-dot" cx="30" cy="85" r="4"></circle>
                                <circle class="chart-line-dot" cx="60" cy="90" r="4"></circle>
                                <circle class="chart-line-dot" cx="90" cy="60" r="4"></circle>
                                <circle class="chart-line-dot" cx="120" cy="40" r="4"></circle>
                                <circle class="chart-line-dot" cx="150" cy="30" r="4"></circle>
                                <circle class="chart-line-dot" cx="180" cy="60" r="4"></circle>
                                <circle class="chart-line-dot" cx="210" cy="70" r="4"></circle>
                                <circle class="chart-line-dot" cx="240" cy="85" r="4"></circle>
                                <circle class="chart-line-dot" cx="270" cy="80" r="4"></circle>
                                <circle class="chart-line-dot" cx="300" cy="75" r="4"></circle>
                            </svg>
                        </div>
                    </div>

                    <div class="chart-legend">
                        <div class="chart-legend-item">
                            <div class="chart-legend-color" style="background-color: #ff9fb5"></div>
                            <span>基础体温</span>
                        </div>
                        <div class="chart-legend-item">
                            <div class="chart-legend-color" style="background-color: #64b5f6"></div>
                            <span>月经期</span>
                        </div>
                        <div class="chart-legend-item">
                            <div class="chart-legend-color" style="background-color: #ffb74d"></div>
                            <span>排卵日</span>
                        </div>
                    </div>
                </div>

                <!-- 周期预测卡片 -->
                <div class="prediction-card">
                    <div class="prediction-header">
                        <div class="prediction-title">周期预测</div>
                        <div class="prediction-toggle">
                            <span>通知提醒</span>
                            <label class="prediction-toggle-switch">
                                <input type="checkbox" checked />
                                <span class="prediction-toggle-slider"></span>
                            </label>
                        </div>
                    </div>

                    <div class="prediction-dates">
                        <div class="prediction-date-item">
                            <div class="prediction-date-label">上次月经</div>
                            <div class="prediction-date-value">6/1</div>
                        </div>
                        <div class="prediction-date-item highlight">
                            <div class="prediction-date-label">排卵日</div>
                            <div class="prediction-date-value">7/15</div>
                        </div>
                        <div class="prediction-date-item">
                            <div class="prediction-date-label">下次月经</div>
                            <div class="prediction-date-value">7/29</div>
                        </div>
                    </div>

                    <div class="fertile-period">
                        <div class="fertile-icon">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="fertile-info">
                            <div class="fertile-title">您的易孕期: 7/12 - 7/18</div>
                            <div class="fertile-desc">易孕期是指排卵日前后几天，这段时间同房受孕几率最高。</div>
                        </div>
                    </div>
                </div>

                <!-- 排卵建议卡片 -->
                <div class="tips-card">
                    <div class="tips-header">备孕小贴士</div>

                    <div class="tips-item">
                        <div class="tips-icon">
                            <i class="fas fa-thermometer-half"></i>
                        </div>
                        <div class="tips-content">
                            <div class="tips-title">坚持测量基础体温</div>
                            <div class="tips-desc">每天早晨醒来后、起床前测量，可更准确预测排卵期。</div>
                        </div>
                    </div>

                    <div class="tips-item">
                        <div class="tips-icon">
                            <i class="fas fa-tint"></i>
                        </div>
                        <div class="tips-content">
                            <div class="tips-title">留意宫颈粘液变化</div>
                            <div class="tips-desc">排卵期宫颈粘液通常增多且呈蛋清状，更有利于精子存活。</div>
                        </div>
                    </div>

                    <div class="tips-item">
                        <div class="tips-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div class="tips-content">
                            <div class="tips-title">把握最佳同房时机</div>
                            <div class="tips-desc">排卵前1-2天同房，受孕几率最高，每隔1-2天一次为宜。</div>
                        </div>
                    </div>
                </div>

                <!-- 排卵检测记录卡片 -->
                <div class="record-card">
                    <div class="record-header">
                        <div class="record-title">排卵检测记录</div>
                        <div class="record-add-btn">
                            <i class="fas fa-plus"></i>
                            <span>添加记录</span>
                        </div>
                    </div>

                    <div class="record-tabs">
                        <div class="record-tab active" data-target="test-strip">排卵试纸</div>
                        <div class="record-tab" data-target="cervical-mucus">宫颈粘液</div>
                        <div class="record-tab" data-target="symptoms">排卵症状</div>
                    </div>

                    <div class="record-content">
                        <!-- 排卵试纸记录面板 -->
                        <div class="record-panel active" id="test-strip">
                            <div class="record-form-group">
                                <div class="record-form-label">今日排卵试纸结果</div>
                                <div class="record-option-group">
                                    <div class="record-option">
                                        <i class="fas fa-times"></i>
                                        <div>阴性</div>
                                    </div>
                                    <div class="record-option selected">
                                        <i class="fas fa-check"></i>
                                        <div>弱阳性</div>
                                    </div>
                                    <div class="record-option">
                                        <i class="fas fa-check-double"></i>
                                        <div>强阳性</div>
                                    </div>
                                </div>
                            </div>

                            <div class="record-form-group">
                                <div class="record-form-label">试纸结果颜色 (对比深浅)</div>
                                <div class="record-option-group">
                                    <div class="record-option">
                                        <div
                                            style="
                                                height: 20px;
                                                background-color: #ffebee;
                                                margin-bottom: 6px;
                                                border-radius: 4px;
                                            "
                                        ></div>
                                        <div>很浅</div>
                                    </div>
                                    <div class="record-option selected">
                                        <div
                                            style="
                                                height: 20px;
                                                background-color: #ef9a9a;
                                                margin-bottom: 6px;
                                                border-radius: 4px;
                                            "
                                        ></div>
                                        <div>较浅</div>
                                    </div>
                                    <div class="record-option">
                                        <div
                                            style="
                                                height: 20px;
                                                background-color: #e53935;
                                                margin-bottom: 6px;
                                                border-radius: 4px;
                                            "
                                        ></div>
                                        <div>深红</div>
                                    </div>
                                </div>
                            </div>

                            <div class="record-form-group">
                                <div class="record-form-label">测试时间</div>
                                <input type="time" class="record-input" value="08:30" />
                            </div>

                            <div class="record-form-group">
                                <div class="record-form-label">备注 (选填)</div>
                                <textarea class="record-textarea" placeholder="输入其他观察或备注..."></textarea>
                            </div>

                            <button class="record-btn">保存记录</button>

                            <div class="history-title">最近记录</div>
                            <div class="record-chart-container">
                                <div class="record-chart-legend">
                                    <div class="record-chart-legend-item">
                                        <div class="record-chart-legend-color" style="background-color: #ffebee"></div>
                                        <span>阴性</span>
                                    </div>
                                    <div class="record-chart-legend-item">
                                        <div class="record-chart-legend-color" style="background-color: #ef9a9a"></div>
                                        <span>弱阳性</span>
                                    </div>
                                    <div class="record-chart-legend-item">
                                        <div class="record-chart-legend-color" style="background-color: #e53935"></div>
                                        <span>强阳性</span>
                                    </div>
                                </div>
                                <svg width="100%" height="80">
                                    <rect x="10" y="50" width="20" height="10" fill="#ffebee" />
                                    <rect x="40" y="40" width="20" height="20" fill="#ffebee" />
                                    <rect x="70" y="30" width="20" height="30" fill="#ef9a9a" />
                                    <rect x="100" y="20" width="20" height="40" fill="#e53935" />
                                    <rect x="130" y="30" width="20" height="30" fill="#ef9a9a" />
                                    <rect x="160" y="40" width="20" height="20" fill="#ffebee" />
                                    <rect x="190" y="50" width="20" height="10" fill="#ffebee" />
                                    <line x1="0" y1="60" x2="220" y2="60" stroke="#e0e0e0" stroke-width="1" />

                                    <text x="10" y="75" font-size="10" fill="#999">7/1</text>
                                    <text x="40" y="75" font-size="10" fill="#999">7/2</text>
                                    <text x="70" y="75" font-size="10" fill="#999">7/3</text>
                                    <text x="100" y="75" font-size="10" fill="#999">7/4</text>
                                    <text x="130" y="75" font-size="10" fill="#999">7/5</text>
                                    <text x="160" y="75" font-size="10" fill="#999">7/6</text>
                                    <text x="190" y="75" font-size="10" fill="#999">今天</text>
                                </svg>
                            </div>

                            <div class="history-list">
                                <div class="history-item">
                                    <div class="history-date">
                                        <div class="history-date-day">06</div>
                                        <div class="history-date-month">7月</div>
                                    </div>
                                    <div class="history-content">
                                        <div class="history-item-row">
                                            <div class="history-item-label">试纸结果</div>
                                            <div class="history-item-value">阴性</div>
                                        </div>
                                        <div class="history-item-row">
                                            <div class="history-item-label">颜色对比</div>
                                            <div class="history-item-value">很浅</div>
                                        </div>
                                        <div class="history-item-row">
                                            <div class="history-item-label">测试时间</div>
                                            <div class="history-item-value">上午 08:30</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="history-item">
                                    <div class="history-date">
                                        <div class="history-date-day">05</div>
                                        <div class="history-date-month">7月</div>
                                    </div>
                                    <div class="history-content">
                                        <div class="history-item-row">
                                            <div class="history-item-label">试纸结果</div>
                                            <div class="history-item-value">弱阳性</div>
                                        </div>
                                        <div class="history-item-row">
                                            <div class="history-item-label">颜色对比</div>
                                            <div class="history-item-value">较浅</div>
                                        </div>
                                        <div class="history-item-row">
                                            <div class="history-item-label">测试时间</div>
                                            <div class="history-item-value">上午 09:15</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 宫颈粘液记录面板 -->
                        <div class="record-panel" id="cervical-mucus">
                            <div class="record-form-group">
                                <div class="record-form-label">今日宫颈粘液量</div>
                                <div class="record-option-group">
                                    <div class="record-option">
                                        <i class="fas fa-tint-slash"></i>
                                        <div>无</div>
                                    </div>
                                    <div class="record-option">
                                        <i class="fas fa-tint"></i>
                                        <div>少量</div>
                                    </div>
                                    <div class="record-option selected">
                                        <i class="fas fa-tint"></i>
                                        <div>中等</div>
                                    </div>
                                    <div class="record-option">
                                        <i class="fas fa-water"></i>
                                        <div>大量</div>
                                    </div>
                                </div>
                            </div>

                            <div class="record-form-group">
                                <div class="record-form-label">粘液质地</div>
                                <div class="record-option-group">
                                    <div class="record-option">
                                        <div>粘稠</div>
                                    </div>
                                    <div class="record-option">
                                        <div>乳白色</div>
                                    </div>
                                    <div class="record-option selected">
                                        <div>蛋清状</div>
                                    </div>
                                    <div class="record-option">
                                        <div>水状</div>
                                    </div>
                                </div>
                            </div>

                            <div class="record-form-group">
                                <div class="record-form-label">拉丝度</div>
                                <div class="record-option-group">
                                    <div class="record-option">
                                        <div>无法拉丝</div>
                                    </div>
                                    <div class="record-option">
                                        <div>1-2cm</div>
                                    </div>
                                    <div class="record-option selected">
                                        <div>3-5cm</div>
                                    </div>
                                    <div class="record-option">
                                        <div>大于5cm</div>
                                    </div>
                                </div>
                            </div>

                            <div class="record-form-group">
                                <div class="record-form-label">备注 (选填)</div>
                                <textarea class="record-textarea" placeholder="输入其他观察或备注..."></textarea>
                            </div>

                            <button class="record-btn">保存记录</button>

                            <div class="history-title">最近记录</div>
                            <div class="history-list">
                                <div class="history-item">
                                    <div class="history-date">
                                        <div class="history-date-day">06</div>
                                        <div class="history-date-month">7月</div>
                                    </div>
                                    <div class="history-content">
                                        <div class="history-item-row">
                                            <div class="history-item-label">粘液量</div>
                                            <div class="history-item-value">少量</div>
                                        </div>
                                        <div class="history-item-row">
                                            <div class="history-item-label">质地</div>
                                            <div class="history-item-value">乳白色</div>
                                        </div>
                                        <div class="history-item-row">
                                            <div class="history-item-label">拉丝度</div>
                                            <div class="history-item-value">1-2cm</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="history-item">
                                    <div class="history-date">
                                        <div class="history-date-day">05</div>
                                        <div class="history-date-month">7月</div>
                                    </div>
                                    <div class="history-content">
                                        <div class="history-item-row">
                                            <div class="history-item-label">粘液量</div>
                                            <div class="history-item-value">少量</div>
                                        </div>
                                        <div class="history-item-row">
                                            <div class="history-item-label">质地</div>
                                            <div class="history-item-value">乳白色</div>
                                        </div>
                                        <div class="history-item-row">
                                            <div class="history-item-label">拉丝度</div>
                                            <div class="history-item-value">无法拉丝</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 排卵症状记录面板 -->
                        <div class="record-panel" id="symptoms">
                            <div class="record-form-group">
                                <div class="record-form-label">今日症状 (可多选)</div>
                                <div class="record-option-group">
                                    <div class="record-option selected">
                                        <div>腹部胀痛</div>
                                    </div>
                                    <div class="record-option">
                                        <div>腰部酸痛</div>
                                    </div>
                                    <div class="record-option selected">
                                        <div>情绪波动</div>
                                    </div>
                                    <div class="record-option">
                                        <div>乳房胀痛</div>
                                    </div>
                                    <div class="record-option">
                                        <div>头痛</div>
                                    </div>
                                    <div class="record-option">
                                        <div>恶心</div>
                                    </div>
                                    <div class="record-option">
                                        <div>性欲增强</div>
                                    </div>
                                    <div class="record-option">
                                        <div>没有症状</div>
                                    </div>
                                </div>
                            </div>

                            <div class="record-form-group">
                                <div class="record-form-label">症状强度</div>
                                <div class="record-option-group">
                                    <div class="record-option">
                                        <div>轻微</div>
                                    </div>
                                    <div class="record-option selected">
                                        <div>中等</div>
                                    </div>
                                    <div class="record-option">
                                        <div>强烈</div>
                                    </div>
                                </div>
                            </div>

                            <div class="record-form-group">
                                <div class="record-form-label">症状描述</div>
                                <textarea
                                    class="record-textarea"
                                    placeholder="详细描述您的症状，包括开始时间、持续时长等..."
                                >
感觉下腹部有轻微胀痛，从上午10点开始，持续了约2小时。情绪比平时更容易波动。</textarea
                                >
                            </div>

                            <button class="record-btn">保存记录</button>

                            <div class="history-title">最近记录</div>
                            <div class="history-list">
                                <div class="history-item">
                                    <div class="history-date">
                                        <div class="history-date-day">06</div>
                                        <div class="history-date-month">7月</div>
                                    </div>
                                    <div class="history-content">
                                        <div class="history-item-row">
                                            <div class="history-item-label">症状</div>
                                            <div class="history-item-value">
                                                <span class="history-item-tag">腹部胀痛</span>
                                                <span class="history-item-tag">情绪波动</span>
                                            </div>
                                        </div>
                                        <div class="history-item-row">
                                            <div class="history-item-label">强度</div>
                                            <div class="history-item-value">中等</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="history-item">
                                    <div class="history-date">
                                        <div class="history-date-day">05</div>
                                        <div class="history-date-month">7月</div>
                                    </div>
                                    <div class="history-content">
                                        <div class="history-item-row">
                                            <div class="history-item-label">症状</div>
                                            <div class="history-item-value">
                                                <span class="history-item-tag">腰部酸痛</span>
                                            </div>
                                        </div>
                                        <div class="history-item-row">
                                            <div class="history-item-label">强度</div>
                                            <div class="history-item-value">轻微</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-notes-medical text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-book-medical text-xl mb-1"></i>
                    <span>知识库</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // 现有代码部分

                // 排卵检测记录标签切换
                const recordTabs = document.querySelectorAll('.record-tab');
                recordTabs.forEach((tab) => {
                    tab.addEventListener('click', function () {
                        // 移除所有active类
                        recordTabs.forEach((t) => t.classList.remove('active'));
                        // 给当前点击的tab添加active类
                        this.classList.add('active');

                        // 显示对应的面板内容
                        const target = this.getAttribute('data-target');
                        const panels = document.querySelectorAll('.record-panel');
                        panels.forEach((panel) => {
                            panel.classList.remove('active');
                        });
                        document.getElementById(target).classList.add('active');
                    });
                });

                // 选项点击事件
                const recordOptions = document.querySelectorAll('.record-option');
                recordOptions.forEach((option) => {
                    option.addEventListener('click', function () {
                        // 获取当前选项组
                        const optionGroup = this.parentElement;

                        // 多选逻辑检查
                        const isMultipleSelect = optionGroup.parentElement
                            .querySelector('.record-form-label')
                            .textContent.includes('多选');

                        if (!isMultipleSelect) {
                            // 单选：移除同组其他选项的选中状态
                            optionGroup.querySelectorAll('.record-option').forEach((opt) => {
                                opt.classList.remove('selected');
                            });
                        }

                        // 切换当前选项的选中状态
                        this.classList.toggle('selected');

                        // 处理"没有症状"的特殊逻辑
                        if (
                            this.querySelector('div').textContent === '没有症状' &&
                            this.classList.contains('selected')
                        ) {
                            // 如果选择了"没有症状"，取消其他所有症状的选中状态
                            optionGroup.querySelectorAll('.record-option').forEach((opt) => {
                                if (opt !== this) {
                                    opt.classList.remove('selected');
                                }
                            });
                        } else if (optionGroup.querySelector('.record-option div').textContent.includes('症状')) {
                            // 如果选择了其他症状，取消"没有症状"的选中状态
                            const noSymptomsOption = Array.from(optionGroup.querySelectorAll('.record-option')).find(
                                (opt) => opt.querySelector('div').textContent === '没有症状'
                            );
                            if (noSymptomsOption) {
                                noSymptomsOption.classList.remove('selected');
                            }
                        }
                    });
                });

                // 添加记录按钮点击事件
                const addRecordBtn = document.querySelector('.record-add-btn');
                if (addRecordBtn) {
                    addRecordBtn.addEventListener('click', function () {
                        // 滚动到记录表单
                        const recordForm = document.querySelector('.record-content');
                        recordForm.scrollIntoView({ behavior: 'smooth' });
                    });
                }
            });
        </script>
    </body>
</html>
